<html>
    <head>
        <meta charset='utf-8'>
        <title>Keep Account</title>
        <link rel="stylesheet" type="text/css" href="/res/common.css" /> 
        <style>
            .one_input_layout { width: 320px; height: 25px; float: left;}
            .one_line_layout { width: 720px; height: 30px;}
            .input_line_element { 
                float: left;
                width: 128px; 
                height: 20px;
                margin-top: 8px;
                margin-bottom: 8px;
            }
            .one_chart {
                float: left;
            }
            #main_data {
                margin-top: 28px;
            }
            #charts_area {
                margin-top: 32px;
            }
        </style>
        <script type="text/javascript" src="/res/common.js"></script>
        <script type="text/javascript" src="/res/echarts.js"></script>
    </head>
    <body>
        <div id="navi_bar">
        </div>
        <div class="one_line_layout">
            <div class="one_input_layout" >
                <p class="input_line_element">Begin time:</p>
                <textarea class="input_line_element" id="begin_time_input" ></textarea>
            </div>
            <div class="one_input_layout" >
                <p class="input_line_element">End time:</p>
                <textarea class="input_line_element" id="end_time_input" ></textarea>
            </div>
        </div>
        <div id="quick_buttons">
        </div>
        <div class="one_line_layout">
            <div class="one_input_layout" >
                <p class="input_line_element" >Cat1:</p>
                <select class="input_line_element" id="cat1_select" disabled="true">
                    <!-- <option class="cat1_select_opt" value="0">Plase select</option> -->
                    <option value="null">All</option>
                </select>
            </div>
            <div class="one_input_layout" >
                <p class="input_line_element" >Currency:</p>
                <select class="input_line_element" id="currency_select">
                    <!-- <option class="currency_select_opt" value="0"> </option> -->
                </select>
            </div>
        </div>
        <div class="one_line_layout">
            <input type="checkbox" value="income_cat1_percentage" id="income_cat1_percentage_check">Income Cat1 Percentage</input>
        </div>
        <div class="one_line_layout">
            <input type="checkbox" value="payment_cat1_percentage" id="payment_cat1_percentage_check">Payment Cat1 Percentage</input>
        </div>
        <div class="one_line_layout">
            <div class="one_input_layout" >
                <input type="checkbox" disabled="true" value="payment_cat2_percentage" id="payment_cat2_percentage_check">Payment Cat2 Percentage</input>
            </div>
            <div class="one_input_layout" >
                <p class="input_line_element" >Cat1:</p>
                <select class="input_line_element" id="payment_cat1_select">
                </select>
            </div>
        </div>
        <div class="one_line_layout">
            <div class="one_input_layout" >
                <input type="checkbox" disabled="true" value="account_balance_tendency" id="account_balance_tendency_check">Account Balance Tendency</input>
            </div>
        </div>
        <div class="one_line_layout">
            <div class="one_input_layout" >
                <input type="checkbox" value="income_payment_tendency" id="income_payment_tendency_check">Income Payment Tendency</input>
            </div>
            <div class="one_input_layout" >
                <p class="input_line_element" >Time Interval:</p>
                <select class="input_line_element" id="income_payment_tendency_time_interval_select">
                    <option value="day">Day</option>
                    <option value="month">Month</option>
                    <option value="year">Year</option>
                </select>
            </div>
        </div>
        <button id="okay_button" onclick="onOkayClick()">Okay</button>
        <div id="charts_area" style="width: 800px;height:600px;">
            <!-- <div class="one_chart"></div> -->
        </div>
    </body>
    <script type="text/javascript">
        function onIncomeCat1PercnetageReceived(result) {
            result = JSON.parse(result);
            data = result.data;
            var chart = echarts.init(document.getElementById('income_cat1_percentage_chart'));
            var option = {
                title: {text:'Income Cat1 Percentage'},
                series: [{
                    name: 'Income Cat1 Percentage',
                    type: 'pie',
                    radius: '50%',
                    data:[]}]
            };
            data.forEach(function(info) {
                option.series[0].data.push({value:info.amount, name:info.cat1_name});
            });
            chart.setOption(option);
        }

        function onPaymentCat1PercnetageReceived(result) {
            result = JSON.parse(result);
            data = result.data;
            var chart = echarts.init(document.getElementById('payment_cat1_percentage_chart'));
            var option = {
                title: {text:'Payment Cat1 Percentage'},
                series: [{
                    name: 'Payment Cat1 Percentage',
                    type: 'pie',
                    radius: '50%',
                    data:[]}]
            };
            data.forEach(function(info) {
                option.series[0].data.push({value:info.amount, name:info.cat1_name});
            });
            chart.setOption(option);
        }

        function onIncomeAndPaymentTendencyReceived(result) {
            result = JSON.parse(result);
            data = result.data;
            var chart = echarts.init(document.getElementById('income_payment_tendency_chart'));
            var option = {
                title: {text:'Income And Payment Tendency'},
                legend: {data:['Income', 'Payment'], top:40},
                xAxis: {data:[]},
                yAxis: {},
                grid:{x:60, y: 80},
                series: [
                    {name: 'Income', type:'line', data:[]},
                    {name: 'Payment', type:'line', data:[]}
                ]
            };
            data.forEach(function (info) {
                option.xAxis.data.push(info.timeme);
                option.series[0].data.push(info.income);
                option.series[1].data.push(info.payment);
            });
            chart.setOption(option);
        }

        function onOkayClick() {
            var is_checked;
            var begin_time = document.getElementById('begin_time_input').value;
            var end_time = document.getElementById('end_time_input').value;
            var currency_id = document.getElementById('currency_select').value;
            var charts_area_div = document.getElementById('charts_area')

            clearSubElement(charts_area_div, 'one_chart');
            is_checked = document.getElementById('income_cat1_percentage_check').checked;
            if(is_checked == true) {
                addChartDiv('charts_area', 'income_cat1_percentage_chart', 'one_chart', '380px', '380px');
                uri = '/service/statistic/getIncomeCat1Percentage?begin_time='
                    + begin_time + '&end_time=' + end_time + '&currency_id=' + currency_id;
                getUrlAsyn(uri, onIncomeCat1PercnetageReceived);
            }
            is_checked = document.getElementById('payment_cat1_percentage_check').checked;
            if(is_checked == true) {
                addChartDiv('charts_area', 'payment_cat1_percentage_chart', 'one_chart', '380px', '380px');
                uri = '/service/statistic/getPaymentCat1Percentage?begin_time='
                    + begin_time + '&end_time=' + end_time + '&currency_id=' + currency_id;
                getUrlAsyn(uri, onPaymentCat1PercnetageReceived);
            }
            is_checked = document.getElementById('payment_cat2_percentage_check').checked;
            if(is_checked == true) {
                addChartDiv('charts_area', 'payment_cat2_percentage_chart', 'one_chart', '380px', '380px');
                
            }
            is_checked = document.getElementById('income_payment_tendency_check').checked;
            if(is_checked == true) {
                var time_interval = document.getElementById('income_payment_tendency_time_interval_select').value;
                addChartDiv('charts_area', 'income_payment_tendency_chart', 'one_chart', '380px', '380px');
                uri = '/service/statistic/getIncomeAndPaymentTendency?begin_time='
                    + begin_time + '&end_time=' + end_time + '&currency_id=' + currency_id
                    + '&time_interval=' + time_interval;
                getUrlAsyn(uri, onIncomeAndPaymentTendencyReceived);
            }
        }

        function onCurrencyReceived(result) {
            result = JSON.parse(result);
            var currency = result.data;
            var currency_select = document.getElementById('currency_select');
            clearSubElement(currency_select, 'currency_select_opt');
            currency.forEach(function(crc){
                appendSelectorOption(currency_select, crc.crc_id, crc.nameme, 'currency_select_opt');
            });
        }

        function onCat1ListReceived(result) {
            result = JSON.parse(result);
            var cat1_select = document.getElementById('payment_cat1_select');
            result.data.forEach(function(cat1_info) {
                var opt = document.createElement('option');
                opt.setAttribute('value', cat1_info.cat1_id);
                opt.innerHTML = cat1_info.nameme;
                cat1_select.appendChild(opt);
            });
        }

        genNavBar('statistic');
        genTimeRangeQuickButton('quick_buttons', 'begin_time_input', 'end_time_input');
        document.getElementById('end_time_input').innerHTML = getCurrentDateTimeString();
        document.getElementById('begin_time_input').innerHTML = getCurrentDateTimeString(-1000 * (24 * 60 * 60 * 365)); // 一年前
        getUrlAsyn('/service/currency/getAll', onCurrencyReceived);
        getUrlAsyn('/service/category/getPaymentCat1', onCat1ListReceived);
    </script>
</html>